<template>
  <van-popup
    v-model:show="show"
    closeable
    position="right"
    :style="{ height: '100%', width: '100%' }"
  >
    <div class="content_wrapper main_bg isHeight" >
      <headback
        :title="t('userDetails')"
        isGoBack
        :goBack="goBack"
        class="border_bottom"
      ></headback>
      <div class="wrap">
        <div class="form_center background_item">
          <div class="form_item">
            <div class="form_title">{{ t("name") }}:</div>
            <div class="form_content">
              {{ data.name }}
            </div>
          </div>
          <div class="form_item">
            <div class="form_title">{{ t("tellPhone") }}:</div>
            <div class="form_content">
              {{ data.phone }}
            </div>
          </div>
          <div class="form_item">
            <div class="form_title">{{ t("email") }}:</div>
            <div class="form_content">
              {{ data.email }}
            </div>
          </div>
          <div class="form_item">
            <div class="form_title">{{ t("remark") }}:</div>
            <div class="form_content textArea_field">
              {{ data.remark }}
            </div>
          </div>

          <div class="form_item">
            <div class="form_title">{{ t("sexy") }}:</div>
            <div class="form_content" style="">
              {{ data.sexy == "M" ? t("M") : t("F") }}
            </div>
          </div>
          <div class="form_item flex_column">
            <div class="form_title line_h30">
              {{ t("identity1") }}
            </div>
            <img :src="data.identity" alt="">
          </div>
          <div class="form_item flex_column">
            <div class="form_title line_h30">
              {{ t("identity2") }}
            </div>
             <img :src="data.identity2" alt="">
          </div>

          <div class="form_item flex_column">
            <div class="form_title line_h30">
              {{ t("uploadPassport") }}
            </div>
             <img :src="data.passport" alt="">
          </div>
        </div>
      </div>
    </div>
    <van-image-preview
      v-model:show="showFile"
      :startPosition="startPosition"
      :images="images"
    >
      <template #image="{ src }">
        <van-image
          class="preview-cover"
          v-if="src.type == 'img'"
          :src="src.url"
        />
      </template>
    </van-image-preview>
  </van-popup>
</template>
<script setup>
import AESUtils from "@/utils/AES.js";
import { showToast } from "vant";
import "vant/es/toast/style";
import { ethers } from "ethers";
import { useStore } from "vuex";
import { ref, reactive, onMounted, computed, watch } from "vue";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
const store = useStore();
import { useRouter } from "vue-router";
import { upload, jsonUpload, IPFS_PUBLIC_URL, getJson } from "@/api/User.js";
import loanEth from "@/utils/loanEth.js";
const requireImg = (imgPath) => {
  return new URL(`../assets/images/${imgPath}`, import.meta.url).href;
};
const router = useRouter();
const loading = ref(false);
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  data: {
    type: Object,
    default: () => {
      return {
        id: 0,
        name: "",
        phone: "",
        email: "",
        sexy: "M",
        identity: "",
        identity2: "",
        passport: "",
        remark: "",
      };
    },
  },
  userId: {
    type: [String, Number],
    default: "",
  },
});
// 护照
const fileList = ref([]);
const fileList2 = ref([]);
const fileList3 = ref([]);
const showFile = ref(false);
const images = ref([]);
const startPosition = ref(0);
const clickPreview = (...arg) => {
  startPosition.value = arg[1].index;
  images.value = fileList2.value;
  showFile.value = true;
};
const emit = defineEmits(["change", "update:modelValue", "close"]);
let show = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
watch(
  () => show.value,
  (newValue) => {
    if (newValue) {
      main();
    }
  }
);
const goBack = () => {
  show.value = false;
};
const main = async () => {
};
main();
</script>

<style lang="scss" scoped>
.textArea_field {
  .van-field {
    height: auto !important;
    line-height: 1.3 !important;
    font-size: 10px;
  }
}
.van-cell {
  font-size: 12px;
  background: transparent !important;
}
.content_wrapper {
  box-sizing: border-box;
  background: #eff0f4;
}
.isHeight {
  height: 100vh;
}
.wrap {
  padding: 10px 12px 0 12px;
  margin-top: 40px;
  position: relative;
  .van-button {
    margin-top: 0.58667rem;
    width: 100%;
    height: 1.06667rem;
    font-size: 0.48rem;
    font-weight: 500;
    border-radius: 0.53333rem;
  }

  .van-button--primary {
    border: none;
    font-size: 0.48rem;
    font-weight: 400;
  }

  :deep .van-cell__right-icon {
    font-size: 12px;
  }
  .picture_tips {
    color: #999;
  }

  .preview-cover {
    position: absolute;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 12px;
    text-align: center;

    .video {
      height: 100%;
      width: 100%;
    }
  }

  .form_center {
    border-radius: 10px;
    padding: 10px 0;
    .form_item {
      display: flex;
      padding: 0 0 0 10px;
      justify-content: space-between;
      align-items: center;
      img{
        height: 100px;
      }

      .form_title {
        display: flex;
        align-items: center;
        opacity: 0.8;
        font-size: 11px;
      }

      .line_h30 {
        line-height: 30px;
      }

      .form_content {
        flex: 1;
        padding: 5px;
        color: #ccc;
     
      }
    }

    .flex_column {
      display: flex;
      flex-direction: column;
      align-items: flex-start;

      :deep .van-uploader__upload {
        height: 70px;
        width: 70px;
      }

      :deep .van-uploader__preview-image {
        height: 70px;
        width: 70px;
      }
    }
  }
}
</style>
